<template>
  <div>
    <a-modal
      :title="editModel ? '新增考核项' : '编辑考核项'"
      :visible="visible"
      :confirm-loading="loading"
      ok-text="保存"
      :width="900"
      @ok="ok"
      @cancel="cancel"
    >
      <div class="about-master-container">
        <a-form-model
          ref="form"
          :model="queryParam"
          :rules="queryParam.allUser ? rules1 : rules"
          :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
          :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
        >
          <a-row :gutter="24">
            <a-col :md="12" :sm="12">
              <a-form-model-item label="考核项" prop="checkType">
                <BaseInput v-model="queryParam.checkType" placeholder="请输入" />
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="12">
              <a-form-model-item label="单位" prop="unit">
                <BaseInput v-model="queryParam.unit" placeholder="请输入" />
              </a-form-model-item>
            </a-col>
            <a-col :md="24" :sm="24">
              <a-form-model-item label="扣分标准" prop="deductPoints">
                <a-checkbox v-model="queryParam.noCheck" @change="onChange1">无考核次数根据实际次数计分</a-checkbox>
                <BaseTextarea v-model="queryParam.deductPoints" v-if="!queryParam.noCheck" placeholder="请输入" />
              </a-form-model-item>
            </a-col>
            <a-col :md="24" :sm="24">
              <a-form-model-item label="选择说明" prop="content">
                <BaseTextarea v-model="queryParam.content" placeholder="请输入" />
              </a-form-model-item>
            </a-col>
            <a-col :md="12" :sm="12">
              <a-form-model-item label="状态" prop="status">
                <div class="operation-conference-btn">
                  <a-select v-model="queryParam.status">
                    <a-select-option :value="0">可用</a-select-option>
                    <a-select-option :value="1">不可用</a-select-option>
                  </a-select>
                </div>
              </a-form-model-item>
            </a-col>
            <a-col :md="24" :sm="24" style="margin-bottom=400px">
              <a-form-model-item label="必考核岗位" prop="checkPostList">
                <a-tree-select
                  v-show="!queryParam.allUser"
                  v-model="queryParam.checkPostList"
                  :tree-data="treeData"
                  tree-checkable
                  :replaceFields="{ children: 'children', title: 'postName', key: 'postCode', value: 'postCode' }"
                  :show-checked-strategy="SHOW_PARENT"
                  :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
                  placeholder="请选择岗位"
                />
                <a-checkbox v-model="queryParam.allUser">全员</a-checkbox>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { TreeSelect } from 'ant-design-vue'
const SHOW_PARENT = TreeSelect.SHOW_PARENT
import { add, update, detail } from '@/api/technical/config'
import api from '@/api/safetySupervision/base/inspectionTemplate.js'
export default {
  name: 'a' + Date.now(),
  props: {
    visible: {
      type: Boolean,
      default: true
    },
    form: {
      type: Object,
      default: () => null
    },
    editModel: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      loading: false,
      queryParam: { noCheck: false, allUser: false },
      SHOW_PARENT,
      rules: {
        status: [{ required: true, message: '请选择', trigger: 'blur' }],
        content: [{ required: true, message: '请输入', trigger: 'blur' }],
        deductPoints: [{ required: true, message: '请输入', trigger: 'blur' }],
        unit: [{ required: true, message: '请输入', trigger: 'blur' }],
        checkType: [{ required: true, message: '请输入', trigger: 'blur' }],
        checkPostList: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      rules1: {
        status: [{ required: true, message: '请选择', trigger: 'blur' }],
        content: [{ required: true, message: '请输入', trigger: 'blur' }],
        deductPoints: [{ required: true, message: '请输入', trigger: 'blur' }],
        unit: [{ required: true, message: '请输入', trigger: 'blur' }],
        checkType: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      treeData: []
    }
  },
  watch: {
    visible(e) {
      if (e) {
        this.queryParam = { ...this.queryParam, ...this.form }
        this.queryParam.allUser = this.queryParam.allUser == 1
        this.queryParam.noCheck = this.queryParam.noCheck == 1
        this.getJobTree()
        try {
          setTimeout(() => {
            const requireDom = document.querySelectorAll('.ant-form-item-required')
            requireDom.forEach((item) => {
              item.parentNode.nextSibling.children[0].children[0].classList.add('requiredFormItem') // 找到'.ant-form-item-children'元素添加样式
            })
          }, 0)
        } catch {}
      } else {
        this.queryParam = { noCheck: false, allUser: false }
        this.$refs.form.clearValidate()
      }
    }
  },
  methods: {
    getJobTree() {
      api.jobBase().then((res) => {
        this.treeData = res.data
      })
    },
    onChange1(e) {
      if (this.queryParam.noCheck) {
        this.queryParam.deductPoints = '无考核次数根据实际次数计分'
      } else {
        this.queryParam.deductPoints = ''
      }
    },
    // onChange2(e) {
    //   console.log(this.queryParam.allUser)
    //   if (this.queryParam.allUser) {
    //     this.queryParam.checkPostList = []
    //     delete this.rules.checkPostList
    //   } else {
    //     this.queryParam.checkPostList = []
    //     this.rules.checkPostList = [{ required: true, message: '请输入', trigger: 'blur' }]
    //   }
    // },
    async ok() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.loading = true

          let params = this.$clone(this.queryParam)
          if (params.allUser) {
            params.checkPostList = []
          }

          this.queryParam.checkPostList?.forEach((i) => {
            this.treeData.forEach((e) => {
              console.log(i == e.postCode)
              if (i == e.postCode) {
                e.children.forEach((f) => {
                  params.checkPostList.push(f.postCode)
                })
              }
            })
          })

          params.allUser = params.allUser ? 1 : 0
          params.noCheck = params.noCheck ? 1 : 0
          const req = this.queryParam.id ? api.updateBase : api.addBase
          let res = await req(params)
          this.loading = false
          this.$noticeSuccess('保存成功')
          this.$emit('ok', params)
          this.cancel()
        }
      })
    },
    cancel() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="less" scoped>
.operation-conference-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  .ant-select {
    flex: 1;
  }
  .ant-checkbox-wrapper {
    margin-left: 10px;
  }
}
</style>
